<template>
	<view class="app">
		<u-waterfall v-model="list" ref="uWaterfall1">
					<template v-slot:left="{leftList}">
						<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="show=!show">
							<u-lazy-load threshold="-450" border-radius="10" :image="item.pic" :index="index"></u-lazy-load>
							<view class="demo-title">
								{{item.title}}
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="show=!show">
							<u-lazy-load threshold="-450" border-radius="10" :image="item.pic" :index="index"></u-lazy-load>
							<view class="demo-title">
								{{item.title}}
							</view>
						</view>
					</template>
				</u-waterfall>
		
		<u-popup v-model="show" mode="bottom">
				<view class="u-p-20 u-text-center u-font-lg u-m-t-10">The effect after you use this product</view>
				<view class="u-text-center">
					<image src="https://mp-b13b8214-9db7-4ccd-829d-06dfba061f65.cdn.bspapp.com/2024/04/08/88839439-88869917-_20240407224604.jpg" style="width:500rpx;" mode="widthFix"></image>
				</view>
			</u-popup>
	</view>
</template>

<script>
	var vk = uni.vk;
	export default {
		data() {
			// 页面数据变量
			return {
				show:false,
				postData: {
					"pageIndex": 1,
					"pageSize": 20,
					"formData": {
						"type": ""
					},
					"columns": [{
						key: "type",
						title: "发型",
						type: "text",
						mode: "="
					}]
				},
				list:[]
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			vk = uni.vk;
			this.options = options;
			this.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady(){},
		// 监听 - 页面每次【显示时】执行（如：前进和返回）（页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面）
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行（如：返回）
		onHide() {},
		// 监听 - 页面每次【卸载时】（一般用于取消页面上的监听器）
		onUnload(){},
		// 监听 - 页面下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		/**
		 * 监听 - 点击右上角转发时 文档 https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage
		 * 如果删除onShareAppMessage函数，则微信小程序右上角转发按钮会自动变灰
		 */
		onShareAppMessage(options) {
			
		},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options={}){
				console.log("init: ",options);
				this.getList()
			},
			async getList(){
				let that = this
				let postData = that.postData
				postData.formData.type = '商品'
				let res = await vk.callFunction({
					url: 'client/products/pub/getList',
					title: '请求中...',
					data: postData,
				});
				if (res.code == 0 ) {
					that.list = res.rows	
				}
			},
		},
		// 监听器
		watch:{
			
		},
		// 计算属性
		computed:{
			
		}
	}
</script>
<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
</style>

<style lang="scss" scoped>
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}
		.demo-image {
			width: 100%;
			border-radius: 4px;
		}
		
		.demo-title {
			font-size: 26rpx;
			margin-top: 5px;
			color: $u-main-color;
		}
</style>